@import "./common/mixin.scss";
@import "./common/vars.scss";

@mixin as-button-border($orientation) {
  &.as-button--primary {
    border-#{$orientation}-color: $--color-white-50-percent;
  }
  &.as-button--success {
    border-#{$orientation}-color: $--color-white-50-percent;
  }
  &.as-button--danger {
    border-#{$orientation}-color: $--color-white-50-percent;
  }
  &.as-button--warning {
    border-#{$orientation}-color: $--color-white-50-percent;
  }
  &.as-button--info {
    border-#{$orientation}-color: $--color-white-50-percent;
  }
}

@include module(button-group) {
  font-size: 0;
  display: inline-block;
  & > .as-button {
    position: relative;

    &:first-child {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
      &:not(.is-border):not(.is-dashed) {
        @include as-button-border(right);
      }
    }
    &:last-child {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
      &:not(.is-border):not(.is-dashed) {
        @include as-button-border(left);
      }
    }

    &:first-child:last-child {
      border-top-left-radius: $--border-radius-base;
      border-bottom-left-radius: $--border-radius-base;
      border-top-right-radius: $--border-radius-base;
      border-bottom-right-radius: $--border-radius-base;
    }

    &:not(:last-child):not(:first-child) {
      border-top-left-radius: 0;
      border-bottom-right-radius: 0;
      border-bottom-left-radius: 0;
      border-top-right-radius: 0;
      &:not(.is-border):not(.is-dashed) {
        @include as-button-border(left);
        @include as-button-border(right);
      }
    }

    &:not(:last-child) {
      margin-right: -1px;
    }

    &:hover {
      z-index: 1;
    }

    & + .as-button {
      margin-left: 0;
    }
  }
}
